<script>
import { handleUrlParams } from "@/utils"
import request from "@/utils/request"
import dateUtils from "@/utils/dateUtils"
import numberUtils from "@/utils/numberUtils"

export default {
  name: "topicList",
  computed: {
    numberUtils() {
      return numberUtils
    },
    dateUtils() {
      return dateUtils
    },
  },
  props: {
    topicScoreDataList: {
      type: Array,
      default: () => [],
    },
    queryParams: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    init() {},
    //查看题目解析（跳转到刷题界面）
    viewTopicDetail(item) {
      uni.navigateTo({
        url: handleUrlParams("/practice/pages/index/index", {
          structureId: item.structureId,
          typeCode: item.typeCode,
          doTopicUser: item.doPaperId,
        }),
      })
    },
    //前往做题
    goToPractice(item) {
      uni.navigateTo({
        url: handleUrlParams("/practice/pages/index/index", {
          structureId: item.structureId,
          typeCode: item.typeCode,
        }),
      })
    },
  },
}
</script>

<template>
  <view class="question-list">
    <view class="question-item" v-for="item in topicScoreDataList" :key="item.doPaperId" v-if="topicScoreDataList">
      <view class="question-name">
        <text>{{ item.structureName }}</text>
        <text v-if="item.isDoing === false" style="color: darkred">\t[未作答]</text>
        <!--				表格-->
        <template v-if="item.isDoing === true">
          <view class="table-wrapper">
            <view class="table-container">
              <!--				表头-->
              <view class="table-header">
                <view class="item">题数</view>
                <!--							无评分的题目不显示-->
                <template v-if="item.topicStatistics.isCalculateScore === 1">
                  <view class="item">答对</view>
                  <view class="item">答错</view>
                  <view class="item">未答</view>
                  <view class="item">得分</view>
                </template>
                <view class="item">用时</view>
              </view>
              <!--				表体-->
              <view class="table-content">
                <!--					题数-->
                <view class="item">{{ item.topicStatistics.totalTopicNum }}</view>
                <!--							无评分的题目不显示-->
                <template v-if="item.topicStatistics.isCalculateScore === 1">
                  <!--					答对-->
                  <view class="item success">{{ item.topicStatistics.rightTopicNum }}</view>
                  <!--					答错-->
                  <view class="item error">{{ item.topicStatistics.errorTopicNum }}</view>
                  <!--					未答-->
                  <view class="item error">{{ item.topicStatistics.noDoNum }}</view>
                  <!--					得分-->
                  <view class="item primary">{{ item.topicStatistics.score }}</view>
                </template>
                <!--					用时-->
                <view class="item" v-if="item.topicStatistics.useTime < 60">{{ `${item.topicStatistics.useTime}s` }}</view>
                <view class="item" v-else>{{ `${dateUtils.formatTimeObject(item.topicStatistics.useTime).m}分` }}</view>
              </view>
            </view>
          </view>
          <!--			答题卡数据（不是写作和翻译题才展示）-->
          <view
            class="answer-card-data"
            v-if="item.topicDetails.length > 0 && !['KY_TRANSLATE', 'WRITING', 'CET_TRANSLATE'].includes(item.typeCode)"
          >
            <view class="topic-item" v-for="item2 in item.topicDetails" :key="item2.topicId">
              <view class="content" :class="[item2.noDo === 1 ? 'noDo' : '', item2.doRight === false ? 'error' : 'correct']">{{
                item2.questionSerialNum
              }}</view>
            </view>
          </view>
          <view class="info">
            <text>{{
              `错误率：${numberUtils.round(
                ((item.topicStatistics.errorTopicNum + item.topicStatistics.noDoNum) / item.topicStatistics.totalTopicNum) * 100,
                2,
              )}%`
            }}</text>
            <text>{{ `作答时间：${item.topicStatistics.doDate}` }}</text>
          </view>
        </template>
        <view class="footer-btn">
          <!--						已经做过-->
          <view class="btn theme" @click="() => viewTopicDetail(item)" v-if="item.isDoing === true">查看题目解析</view>
          <!--						还未做过-->
          <view class="btn primary" v-else @click="() => goToPractice(item)">前往做题</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.question-list {
  margin-top: 10rpx;
  .question-item {
    padding-top: 30rpx;
    padding-bottom: 30rpx;
    &:not(:first-child) {
      border-top: 2rpx solid var(--border-color);
    }
    .question-name {
      font-size: 32rpx;
    }
    .table-wrapper {
      margin-top: 20rpx;
      .table-container {
        font-size: 30rpx;
        .item {
          display: flex;
          align-items: center;
          justify-content: center;
          width: calc((100vw - 123rpx) / 6);
        }
        .table-header {
          border-top-left-radius: 8rpx;
          border-top-right-radius: 8rpx;
          display: flex;
          background: #57bd95;
          width: max-content;
          border: 3rpx solid #57bd95;
          > .item {
            height: 52rpx;
            color: white;
            &:not(:first-child) {
              border-left: 2rpx solid #c5ffe8;
            }
          }
        }
        .table-content {
          border-bottom-left-radius: 8rpx;
          border-bottom-right-radius: 8rpx;
          border: 3rpx solid #57bd95;
          display: flex;
          width: max-content;
          box-sizing: border-box;
          > .item {
            height: 36rpx;
            margin: 20rpx 0;
            &:not(:first-child) {
              border-left: 2rpx solid #e2e2e2;
            }
            &.success {
              color: #57bd95;
            }
            &.error {
              color: #ff7777;
            }
            &.primary {
              color: #426edf;
            }
          }
        }
      }
    }
    .info {
      font-size: 30rpx;
      color: var(--text-color-light);
      margin-top: 20rpx;
      display: flex;
      justify-content: space-between;
    }
    .footer-btn {
      margin-top: 20rpx;
      display: flex;
      justify-content: flex-end;
      .btn {
        padding: 10rpx 20rpx;
        border-radius: 30rpx;
        font-size: 28rpx;
        width: max-content;
        &.theme {
          background: var(--theme-color);
					color: var(--text-color-white);
        }
        &.primary {
          background: #2979ff;
          color: white;
        }
      }
    }
    .answer-card-data {
      margin-top: 20rpx;
      display: flex;
      flex-wrap: wrap;
      .topic-item {
        width: 20%;
        display: flex;
        justify-content: center;
        padding: 10rpx 0;
        .content {
          font-size: 30rpx;
          color: white;
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          &.correct {
            background: #3cbb98;
          }
          &.error {
            background: #fe5d5a;
          }
          &.noDo {
            background: #dcdcdc;
            color: var(--text-color);
          }
        }
      }
    }
  }
}
</style>
